<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import {ElMessage} from 'element-plus'

const router = useRouter();

onMounted(() => {
  const token = localStorage.getItem("token");
  const isLoggingOut = window.__isLoggingOut;
});

const menuList = [
  { key: "profile", label: "查询个人信息" },
  { key: "assessment", label: "查询考核结果" },
];

const routeMap = {
  profile: "/employee/home/myself",
  assessment: "/employee/home/selectPlan",
};

const activeMenu = ref("profile");

// 获取当前时间字符串
function getCurrentTime() {
  const now = new Date();
  const y = now.getFullYear();
  const m = String(now.getMonth() + 1).padStart(2, "0");
  const d = String(now.getDate()).padStart(2, "0");
  const h = String(now.getHours()).padStart(2, "0");
  const min = String(now.getMinutes()).padStart(2, "0");
  return `${y}-${m}-${d} ${h}:${min}`;
}

const timeStr = ref(getCurrentTime());
let timeInterval = null;

onMounted(() => {
  timeInterval = setInterval(() => {
    timeStr.value = getCurrentTime();
  }, 1000);
});

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval);
  }
});

function handleMenuClick(item) {
  activeMenu.value = item.key;
  const route = routeMap[item.key];
  if (route) {
    router.push(route);
  }
}

function handleSubMenuClick(subItem) {
  activeSubMenu.value = subItem.key;
  const route = routeMap[subItem.key];
  if (route) {
    router.push(route);
  }
}

function isMenuOpen(menuKey) {
  return openMenus.value.has(menuKey);
}

const username = `考核人员${localStorage.getItem("employeeId")}`;

function handleLogout() {
  const employeeId = Number(localStorage.getItem("employeeId"));
  window.__isLoggingOut = true;

  axios
    .delete("http://127.0.0.1:8080/login/logout", { data: { employeeId } })
    .then(() => {
      localStorage.clear();
      ElMessage.success("退出成功");
      window.__isLoggingOut = false;
      window.location.href = "/login";
      // ✅ 强制跳转并刷新页面，防止当前组件还在
      
    })
    .catch(() => {
      ElMessage.error("退出失败");
      window.__isLoggingOut = false;
    });
    
}


</script>

<template>
  <div class="admin-layout">
    <!-- 顶部栏 -->
    <header class="header">
      <div class="header-content">
        <img src="/public/favicon.ico" alt="logo" class="logo" />
        <span class="title">综合业务管理系统</span>
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </div>
    </header>

    <!-- 主体区域 -->
    <div class="main-container">
      <!-- 左侧菜单栏 -->
      <aside class="sidebar">
        <!-- 时间和欢迎语在菜单栏顶部 -->
        <div class="sidebar-info">
          <div class="sidebar-time">{{ timeStr }}</div>
          <div class="sidebar-welcome">欢迎您，{{ username }}！</div>
        </div>

        <nav class="menu-container">
          <div v-for="item in menuList" :key="item.key" class="menu-group">
            <div
              class="menu-item"
              :class="{ active: activeMenu === item.key }"
              @click="handleMenuClick(item)"
            >
              <span class="menu-label">{{ item.label }}</span>
            </div>
          </div>
        </nav>
      </aside>

      <!-- 右侧内容区 -->
      <main class="content">
          <router-view />
      </main>
    </div>
  </div>
</template>

<style scoped>
.admin-layout {
  height: 100vh;
  background: #f5f6fa;
  display: flex;
  flex-direction: column;
}

.header {
  height: 64px;
  background: #2d3a4b;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 32px;
}

.header-content {
  display: flex;
  align-items: center;
}

.logo {
  height: 36px;
  margin-right: 16px;
}

.title {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
}

.main-container {
  flex: 1;
  display: flex;
}

.sidebar {
  width: 220px;
  background: #223047;
  color: #fff;
  padding-top: 0;
  border-right: 1px solid #1a2533;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.sidebar-info {
  padding: 32px 16px 18px 32px;
  border-bottom: 1px solid #1a2533;
  margin-bottom: 8px;
}

.sidebar-time {
  font-size: 15px;
  color: #8bb6e9;
  font-weight: bold;
  margin-bottom: 6px;
}

.sidebar-welcome {
  font-size: 14px;
  color: #cfd8dc;
}

.menu-container {
  flex: 1;
}

.menu-group {
  margin-bottom: 4px;
}

.menu-item {
  padding: 16px 28px 16px 32px;
  cursor: pointer;
  font-size: 17px;
  display: flex;
  align-items: center;
  position: relative;
  background: transparent;
  color: #cfd8dc;
  font-weight: normal;
  transition: background 0.2s, color 0.2s;
}

.menu-item:hover {
  background: #1a2533;
  color: #fff;
}

.menu-item.active {
  background: #1a2533;
  color: #fff;
  font-weight: bold;
}

.menu-item.hasChildren .triangle {
  margin-left: auto;
  font-size: 13px;
  transition: transform 0.2s;
  color: #8bb6e9;
}

.menu-item.hasChildren.active .triangle {
  color: #fff;
}

.triangle {
  display: inline-block;
  transform: rotate(90deg);
  color: #8bb6e9;
}

.triangle.open {
  transform: rotate(180deg);
}

.submenu {
  background: #1a2533;
  padding-left: 10px;
  border-left: 3px solid #8bb6e9;
}

.submenu-item {
  padding: 10px 0 10px 32px;
  font-size: 16px;
  color: #cfd8dc;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.2s, color 0.2s;
}

.submenu-item .dot {
  width: 6px;
  height: 6px;
  background: #8bb6e9;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
}

.submenu-item.active,
.submenu-item:hover {
  color: #8bb6e9;
  background: #192033;
}

.content {
  flex: 1;
  padding: 0;
  background: #fff;
  min-width: 0;
  /* overflow-y: auto; */
  max-height: 100vh;
}

/* 全局样式 */
body {
  margin: 0;
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

.add-emp-card {
  max-width: 700px;
  margin: 0;
  padding: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.logout-btn {
  margin-left: 32px;
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
}
.logout-btn:hover {
  background: #c0392b;
}
</style>
